WebGL Shadow Mapping: Kompleksowy przewodnik po renderowaniu w czasie rzeczywistym

W świecie trójwymiarowej grafiki komputerowej niewiele elementów przyczynia się do realizmu i immersji bardziej niż cienie. Dostarczają one kluczowych wskazówek wizualnych dotyczących relacji przestrzennych między obiektami, lokalizacji źródeł światła i ogólnej geometrii sceny. Bez cieni światy 3D mogą wydawać się płaskie, odłączone i sztuczne. W przypadku internetowych aplikacji 3D zasilanych przez WebGL implementacja wysokiej jakości cieni w czasie rzeczywistym jest znakiem rozpoznawczym profesjonalnych doświadczeń. Ten przewodnik zawiera dogłębną analizę najbardziej fundamentalnej i szeroko stosowanej techniki do osiągnięcia tego celu: Mapowania Cieni.

Niezależnie od tego, czy jesteś doświadczonym programistą grafiki, czy twórcą stron internetowych wchodzącym w trzeci wymiar, ten artykuł wyposaży Cię w wiedzę potrzebną do zrozumienia, implementacji i rozwiązywania problemów z cieniami w czasie rzeczywistym w projektach WebGL. Przejdziemy od podstawowych teorii do praktycznych szczegółów implementacji, analizując powszechne pułapki i zaawansowane techniki stosowane w nowoczesnych silnikach graficznych.

Rozdział 1: Podstawy Mapowania Cieni

U podstaw mapowanie cieni jest sprytną i elegancką techniką, która określa, czy punkt w scenie znajduje się w cieniu, zadając proste pytanie: "Czy ten punkt jest widoczny dla źródła światła?" Jeśli odpowiedź brzmi "nie", oznacza to, że coś blokuje światło, a punkt musi znajdować się w cieniu. Aby odpowiedzieć na to pytanie programowo, używamy dwuprzebiegowego podejścia do renderowania.

Czym jest Mapowanie Cieni? Podstawowa koncepcja

Cała technika polega na dwukrotnym renderowaniu sceny, za każdym razem z innego punktu widzenia:

• Przebieg 1: Przebieg Głębokości (Perspektywa Światła). Najpierw renderujemy całą scenę z dokładnej pozycji i orientacji źródła światła. Jednak w tym przebiegu nie interesują nas kolory ani tekstury. Jedyną potrzebną informacją jest głębia. Dla każdego renderowanego obiektu zapisujemy jego odległość od źródła światła. Ta kolekcja wartości głębi jest przechowywana w specjalnej teksturze zwanej mapą cieni lub mapą głębi. Każdy piksel na tej mapie reprezentuje odległość do najbliższego obiektu z punktu widzenia światła w określonym kierunku.
• Przebieg 2: Przebieg Sceny (Perspektywa Kamery). Następnie renderujemy scenę tak, jak zwykle, z perspektywy głównej kamery. Ale dla każdego rysowanego piksela wykonujemy dodatkowe obliczenie. Określamy pozycję tego piksela w przestrzeni 3D, a następnie pytamy: "Jak daleko ten punkt znajduje się od źródła światła?" Następnie porównujemy tę odległość z wartością zapisaną w naszej mapie cieni (z Przebiegu 1) w odpowiedniej lokalizacji.

Logika jest prosta:

• Jeśli bieżąca odległość piksela od światła jest większa niż odległość zapisana w mapie cieni, oznacza to, że istnieje inny obiekt bliżej światła na tej samej linii wzroku. W związku z tym bieżący piksel jest w cieniu.
• Jeśli odległość piksela jest mniejsza lub równa odległości w mapie cieni, oznacza to, że nic go nie blokuje, a piksel jest w pełni oświetlony.

Konfiguracja Sceny

Aby zaimplementować mapowanie cieni w WebGL, potrzebujesz kilku kluczowych komponentów:

• Źródło Światła: Może to być światło kierunkowe (jak słońce), światło punktowe (jak żarówka) lub reflektor. Typ światła określi rodzaj macierzy projekcji używanej podczas przebiegu głębokości.
• Obiekt Framebuffer (FBO): WebGL normalnie renderuje do domyślnego framebufferu ekranu. Aby utworzyć naszą mapę cieni, potrzebujemy celu renderowania poza ekranem. FBO pozwala nam renderować do tekstury zamiast na ekran. Nasze FBO będzie skonfigurowane z dołączoną teksturą głębi.
• Dwa zestawy shaderów: Będziesz potrzebować jednego programu shaderów do przebiegu głębokości (bardzo prostego) i innego do ostatecznego przebiegu sceny (który będzie zawierał logikę obliczania cieni).
• Macierze: Będziesz potrzebować standardowych macierzy modelu, widoku i projekcji dla kamery. Co kluczowe, będziesz również potrzebować macierzy widoku i projekcji dla źródła światła, często łączonych w jedną "macierz przestrzeni świetlnej".

Rozdział 2: Potok Renderowania Dwóch Przebiegów w Szczegółach

Rozbijmy dwa przebiegi renderowania krok po kroku, skupiając się na rolach macierzy i shaderów.

Przebieg 1: Przebieg Głębokości (Z Perspektywy Światła)

Celem tego przebiegu jest wypełnienie naszej tekstury głębi. Oto jak to działa:

1. Powiąż FBO: Przed rysowaniem instruujesz WebGL, aby renderował do Twojego niestandardowego FBO zamiast do płótna.
2. Skonfiguruj Widok: Ustaw wymiary widoku tak, aby pasowały do rozmiaru tekstury mapy cieni (np. pikseli 1024x1024).
3. Wyczyść Bufor Głębokości: Upewnij się, że bufor głębi FBO jest wyczyszczony przed renderowaniem.
4. Utwórz Macierze Światła:
   • Macierz Widoku Światła: Ta macierz przekształca świat do punktu widzenia światła. W przypadku światła kierunkowego jest ona zazwyczaj tworzona za pomocą funkcji `lookAt`, gdzie "oko" to pozycja światła, a "cel" to kierunek, w którym się świeci.
   • Macierz Projekcji Światła: Dla światła kierunkowego, które ma równoległe promienie, używana jest projekcja ortograficzna. W przypadku świateł punktowych lub reflektorów używana jest projekcja perspektywiczna. Ta macierz definiuje objętość w przestrzeni (pudełko lub frustum), która będzie rzucać cienie.
5. Użyj Programu Shaderów Głębokości: Jest to minimalny shader. Jedynym zadaniem vertex shadera jest pomnożenie pozycji wierzchołka przez macierze widoku i projekcji światła. Fragment shader jest jeszcze prostszy: po prostu zapisuje wartość głębi fragmentu (jego współrzędną z) do tekstury głębi. W nowoczesnym WebGL często nawet nie potrzebujesz niestandardowego fragment shader, ponieważ FBO można skonfigurować tak, aby automatycznie przechwytywał bufor głębi.
6. Renderuj Scenę: Narysuj wszystkie obiekty rzucające cienie w swojej scenie. FBO zawiera teraz naszą ukończoną mapę cieni.

Przebieg 2: Przebieg Sceny (Z Perspektywy Kamery)

Teraz renderujemy ostateczny obraz, używając właśnie utworzonej mapy cieni do określenia cieni.

1. Odłącz FBO: Przełącz się z powrotem na renderowanie do domyślnego framebufferu płótna.
2. Skonfiguruj Widok: Ustaw wymiary widoku z powrotem na wymiary płótna.
3. Wyczyść Ekran: Wyczyść bufory koloru i głębi płótna.
4. Użyj Programu Shaderów Sceny: Tutaj dzieje się magia. Ten shader jest bardziej złożony.
   • Vertex Shader: Ten shader musi zrobić dwie rzeczy. Po pierwsze, oblicza ostateczną pozycję wierzchołka, używając standardowych macierzy modelu, widoku i projekcji kamery. Po drugie, musi również obliczyć pozycję wierzchołka z perspektywy światła, używając macierzy przestrzeni świetlnej z Przebiegu 1. Ta druga współrzędna jest przekazywana do fragment shader jako zmienna.
   • Fragment Shader: To jest rdzeń logiki cieniowania. Dla każdego fragmentu:
     1. Odbierz interpolowaną pozycję w przestrzeni światła z vertex shadera.
     2. Wykonaj podział perspektywiczny na tej współrzędnej (podziel x, y, z przez w). Przekształca to ją do Znormalizowanych Współrzędnych Urządzenia (NDC), mieszczących się w zakresie od -1 do 1.
     3. Przekształć NDC na współrzędne tekstury (które mieszczą się w zakresie od 0 do 1), abyśmy mogli próbować naszą mapę cieni. Jest to prosta operacja skalowania i przesunięcia: `texCoord = ndc * 0.5 + 0.5;`.
     4. Użyj tych współrzędnych tekstury, aby spróbować teksturę mapy cieni utworzoną w Przebiegu 1. Daje nam to `depthFromShadowMap`.
     5. Bieżąca głębia fragmentu z perspektywy światła to jego komponent z przekształconej współrzędnej przestrzeni świetlnej. Nazwijmy ją `currentDepth`.
     6. Porównaj głębie: Jeśli `currentDepth > depthFromShadowMap`, fragment jest w cieniu. Będziemy musieli dodać małe przesunięcie do tego sprawdzenia, aby uniknąć artefaktu zwanego "trądzikiem cieni", który omówimy później.
     7. Na podstawie porównania określ czynnik cienia (np. 1.0 dla oświetlonego, 0.3 dla zacienionego).
     8. Zastosuj ten czynnik cienia do ostatecznego obliczenia koloru (np. pomnóż składowe oświetlenia otoczenia i rozproszonego przez czynnik cienia).
5. Renderuj Scenę: Narysuj wszystkie obiekty w scenie.

Rozdział 3: Powszechne Problemy i Rozwiązania

Implementacja podstawowego mapowania cieni szybko ujawni kilka powszechnych artefaktów wizualnych. Zrozumienie i naprawienie ich jest kluczowe do osiągnięcia wysokiej jakości wyników.

Trądzik Cieni (Artefakty Samo-Cieniowania)

Problem: Możesz zauważyć dziwne, nieprawidłowe wzory ciemnych linii lub wzory typu moiré na powierzchniach, które powinny być w pełni oświetlone. Jest to "trądzik cieni". Występuje, ponieważ wartość głębi zapisana w mapie cieni i wartość głębi obliczona podczas przebiegu sceny pochodzą z tej samej powierzchni. Ze względu na niedokładności zmiennoprzecinkowe i ograniczoną rozdzielczość mapy cieni, drobne błędy mogą spowodować, że fragment błędnie określi, że znajduje się za sobą, powodując samo-cieniowanie.

Rozwiązanie: Przesunięcie Głębokości. Najprostszym rozwiązaniem jest wprowadzenie małego przesunięcia do `currentDepth` przed porównaniem. Sprawiając, że fragment wydaje się nieco bliżej światła niż jest w rzeczywistości, wypychamy go "poza" własny cień.

float shadow = currentDepth > depthFromShadowMap + bias ? 0.3 : 1.0;

Znalezienie właściwej wartości przesunięcia jest delikatnym balansowaniem. Zbyt małe, a trądzik pozostaje. Zbyt duże, a uzyskasz następny problem.

Peter Panning

Problem: Ten artefakt, nazwany na cześć postaci, która potrafiła latać i straciła cień, objawia się widoczną przerwą między obiektem a jego cieniem. Sprawia, że obiekty wydają się unosić lub być odłączone od powierzchni, na których powinny spoczywać. Jest bezpośrednim wynikiem użycia zbyt dużego przesunięcia głębokości.

Rozwiązanie: Przesunięcie Głębokości Względem Nachylenia. Bardziej solidnym rozwiązaniem niż stałe przesunięcie jest uczynienie przesunięcia zależnym od nachylenia powierzchni względem światła. Bardziej strome wielokąty są bardziej podatne na trądzik i wymagają większego przesunięcia. Bardziej płaskie wielokąty potrzebują mniejszego przesunięcia. Większość interfejsów API grafiki, w tym WebGL, zapewnia funkcjonalność do automatycznego stosowania tego rodzaju przesunięcia podczas przebiegu głębokości, co jest generalnie preferowane niż ręczne przesunięcie w fragment shaderze.

Aliasing Perspektywiczny (Postrzępione Krawędzie)

Problem: Krawędzie twoich cieni wyglądają kanciasto, postrzępione i pikselowato. Jest to forma aliasingu. Dzieje się tak, ponieważ rozdzielczość mapy cieni jest skończona. Pojedynczy piksel (lub texel) na mapie cieni może pokrywać duży obszar na powierzchni w finalnej scenie, zwłaszcza dla powierzchni bliskich kamery lub widzianych pod ostrym kątem. Ta rozbieżność rozdzielczości powoduje charakterystyczny kanciasty wygląd.

Rozwiązanie: Zwiększenie rozdzielczości mapy cieni (np. z 1024x1024 do 4096x4096) może pomóc, ale wiąże się to ze znacznym kosztem pamięci i wydajności i nie rozwiązuje całkowicie podstawowego problemu. Prawdziwe rozwiązania leżą w bardziej zaawansowanych technikach.

Rozdział 4: Zaawansowane Techniki Mapowania Cieni

Podstawowe mapowanie cieni stanowi fundament, ale profesjonalne aplikacje wykorzystują bardziej wyrafinowane algorytmy do przezwyciężenia jego ograniczeń, zwłaszcza aliasingu.

Filtrowanie Procentowo-Zbliżeniowe (PCF)

PCF jest najczęstszą techniką zmiękczania krawędzi cieni i redukcji aliasingu. Zamiast pobierać pojedynczą próbkę z mapy cieni i podejmować binarną decyzję (w cieniu lub poza nim), PCF pobiera wiele próbek z obszaru wokół docelowej współrzędnej.

Koncepcja: Dla każdego fragmentu próbujemy mapę cieni nie tylko raz, ale w siatce (np. 3x3 lub 5x5) wokół rzutowanej współrzędnej tekstury fragmentu. Dla każdej z tych próbek wykonujemy porównanie głębokości. Ostateczna wartość cienia jest średnią wszystkich tych porównań. Na przykład, jeśli 4 z 9 próbek znajduje się w cieniu, fragment będzie zacieniony w 4/9, co spowoduje płynny półcień (miękką krawędź cienia).

Implementacja: Odbywa się to w całości w fragment shaderze. Wymaga pętli, która iteruje po małym jądrze, próbując mapę cieni w każdym przesunięciu i akumulując wyniki. WebGL 2 oferuje wsparcie sprzętowe (`texture` z `sampler2DShadow`), które może wykonywać porównanie i filtrowanie bardziej wydajnie.

Korzyść: Drastycznie poprawia jakość cieni, zastępując twarde, zaliasingowane krawędzie miękkimi i gładkimi.

Koszt: Wydajność spada wraz z liczbą próbek pobieranych na fragment.

Kaskadowe Mapy Cieni (CSM)

CSM jest standardowym rozwiązaniem branżowym do renderowania cieni z pojedynczego źródła światła kierunkowego (jak słońce) nad bardzo dużą sceną. Bezpośrednio rozwiązuje problem aliasingu perspektywicznego.

Koncepcja: Podstawowa idea polega na tym, że obiekty bliskie kamerze wymagają znacznie wyższej rozdzielczości cieni niż obiekty daleko. CSM dzieli frustum widoku kamery na kilka sekcji, czyli "kaskad", wzdłuż jej głębokości. Następnie dla każdej kaskady renderowana jest osobna, wysokiej jakości mapa cieni. Najbliższa kaskada kamery obejmuje niewielki obszar przestrzeni świata, a tym samym ma bardzo wysoką efektywną rozdzielczość. Kaskady dalej obejmują coraz większe obszary przy tej samej wielkości tekstury, co jest akceptowalne, ponieważ te szczegóły są mniej widoczne dla gracza.

Implementacja: Jest to znacznie bardziej złożone.

1. W CPU podziel frustum kamery na 2-4 kaskady.
2. Dla każdej kaskady oblicz ścisłą macierz projekcji ortograficznej dla światła, która idealnie obejmuje tę sekcję frustum.
3. W pętli renderowania wykonaj przebieg głębokości wielokrotnie – raz dla każdej kaskady, renderując do innej mapy cieni (lub regionu atlasu tekstur).
4. W fragment shaderze przebiegu sceny określ, do której kaskady należy bieżący fragment na podstawie jego odległości od kamery.
5. Próbuj odpowiedniej mapy cieni kaskady, aby obliczyć cień.

Korzyść: Zapewnia spójnie wysoką rozdzielczość cieni na dużych odległościach, co czyni ją idealną do środowisk zewnętrznych.

Mapy Cieni Wariancji (VSM)

VSM to kolejna technika tworzenia miękkich cieni, ale różni się od PCF.

Koncepcja: Zamiast przechowywać tylko głębokość w mapie cieni, VSM przechowuje dwie wartości: głębokość (pierwszy moment) i kwadrat głębokości (drugi moment). Te dwie wartości pozwalają nam obliczyć wariancję rozkładu głębokości. Używając narzędzia matematycznego zwanego nierównością Czebyszewa, możemy następnie oszacować prawdopodobieństwo, że fragment znajduje się w cieniu. Kluczową zaletą jest to, że tekstura VSM może być rozmyta przy użyciu standardowego sprzętowego filtrowania liniowego i mipmapowania, co jest matematycznie nieprawidłowe dla standardowej mapy głębi. Pozwala to na bardzo duże, miękkie i gładkie półcienie przy stałym koszcie wydajności.

Wada: Główną wadą VSM jest "przeciek światła", gdzie światło może wydawać się przenikać przez obiekty w sytuacjach z nakładającymi się przesłonięciami, ponieważ przybliżenie statystyczne może zawieść.

Rozdział 5: Praktyczne Wskazówki Dotyczące Implementacji i Wydajności

Wybór Rozdzielczości Mapy Cieni

Rozdzielczość mapy cieni jest bezpośrednim kompromisem między jakością a wydajnością. Większa tekstura zapewnia ostrzejsze cienie, ale zużywa więcej pamięci wideo i wymaga więcej czasu na renderowanie i próbkowanie. Typowe rozmiary obejmują:

• 1024x1024: Dobra podstawa dla wielu aplikacji.
• 2048x2048: Oferuje zauważalną poprawę jakości dla aplikacji desktopowych.
• 4096x4096: Wysoka jakość, często używana do głównych zasobów lub w silnikach z solidnym cullingiem.

Pamiętaj, że zużycie pamięci rośnie kwadratowo; tekstura 4096x4096 zużywa 16 razy więcej pamięci niż tekstura 1024x1024.

Optymalizacja Frustum Światła

Aby jak najlepiej wykorzystać każdy piksel mapy cieni, kluczowe jest, aby objętość projekcji światła (jej pudełko ortograficzne lub frustum perspektywiczny) była jak najściślej dopasowana do elementów sceny, które wymagają cieni. W przypadku światła kierunkowego oznacza to dopasowanie jego projekcji ortograficznej tak, aby obejmowała tylko widoczną część frustum kamery. Każda zmarnowana przestrzeń na mapie cieni oznacza zmarnowaną rozdzielczość.

Rozszerzenia i Wersje WebGL

WebGL 1 vs WebGL 2: Chociaż mapowanie cieni jest możliwe w WebGL 1, jest znacznie łatwiejsze i bardziej wydajne w WebGL 2. WebGL 1 wymaga rozszerzenia `WEBGL_depth_texture` do tworzenia tekstury głębi. WebGL 2 ma tę funkcjonalność wbudowaną. Ponadto WebGL 2 zapewnia dostęp do samplerów cieni (`sampler2DShadow`), które mogą wykonywać sprzętowo przyspieszone PCF, oferując znaczący wzrost wydajności w porównaniu do ręcznych pętli PCF w shaderze.

Debugowanie Cieni

Debugowanie cieni może być notorycznie trudne. Najbardziej użyteczną techniką jest wizualizacja mapy cieni. Tymczasowo zmodyfikuj swoją aplikację, aby renderować teksturę głębi z określonego źródła światła bezpośrednio na czworokącie na ekranie. Pozwala to zobaczyć dokładnie, co światło "widzi". Może to natychmiast ujawnić problemy z macierzami światła, cullingiem frustum lub renderowaniem obiektów podczas przebiegu głębokości.

Wniosek

Mapowanie cieni w czasie rzeczywistym jest kamieniem węgielnym nowoczesnej grafiki 3D, przekształcając płaskie, pozbawione życia sceny w wiarygodne i dynamiczne światy. Chociaż koncepcja renderowania z perspektywy światła jest prosta, osiągnięcie wysokiej jakości, pozbawionych artefaktów wyników wymaga dogłębnego zrozumienia podstawowych mechanizmów, od dwuprzebiegowego potoku po niuanse przesunięcia głębokości i aliasingu.

Zaczynając od podstawowej implementacji, możesz stopniowo radzić sobie z powszechnymi artefaktami, takimi jak trądzik cieni i postrzępione krawędzie. Następnie możesz podnieść jakość swoich wizualizacji dzięki zaawansowanym technikom, takim jak PCF dla miękkich cieni lub kaskadowe mapy cieni dla rozległych środowisk. Podróż do renderowania cieni jest doskonałym przykładem połączenia sztuki i nauki, które czyni grafikę komputerową tak fascynującą. Zachęcamy do eksperymentowania z tymi technikami, przekraczania ich granic i wprowadzania nowego poziomu realizmu do projektów WebGL.